<template>
  <div class="personnel_manage">
    <!--标题B-->
    <div class="pagetitle">
      <div class="pageText">
        <span>人员管理</span>
      </div>
    </div>
    <!--标题E-->
    <div class="secondaryTitle">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-select v-model="statusStr" @change="sec" clearable placeholder="黑白名单">
            <el-option label="白名单" value="white"></el-option>
            <el-option label="黑名单" value="black"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model="groupNameStr" @change="sec" clearable placeholder="分组">
            <el-option
              v-for="(item,index) in nList"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="5">
          <el-input placeholder="请输入车牌号" style="width: 4rem;" v-model="input" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="sec"></el-button>
          </el-input>
        </el-col>

        <el-col :span="13" style="text-align: right">
          <span class="greenf" @click="addpsm(0)">添加人员</span>
        </el-col>
      </el-row>
      <!-- <span
         @click="openlist(0)"
         :style="status==1?' color: #ffffff;background: #00CC46;':'color: #89898A;background: #F9F9FA;'"
         class="greenf">白名单</span>
       <span
         @click="openlist(1)"
         :style="status==2?' color: #ffffff;background: #00CC46;':'color: #89898A;background: #F9F9FA;'"
         class="cancelf">黑名单</span>
       <el-input placeholder="请输入姓名" style="width: 4rem;" v-model="input" class="input-with-select">
         <el-button slot="append" icon="el-icon-search" @click="sec"></el-button>
       </el-input>
       <div style="position: absolute;right: 0;top: 0;">
         <span class="greenf" @click="addpsm(0)">添加人员</span>
       </div>-->

    </div>

    <table style="width:calc(100% - .8rem);margin: 0 .4rem">
      <thead>
      <th>名称</th>
      <th>性别</th>
      <th>证件类别</th>
      <th>证件号码</th>
      <th>人员照片</th>
      <th>黑白名单</th>
      <th>分组</th>
      <th>操作</th>
      </thead>
      <tbody>
      <tr v-for="item in userList">
        <td>{{item.name}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.certificateType}}</td>
        <td>{{item.certificateNum == '' ? '暂无' : item.certificateNum}}</td>
        <td style="display:inline-block;width: .6rem;height: .6rem;line-height: .55rem;overflow: hidden">
          <div style="width: .55rem;height: .55rem;border-radius: 50%;overflow: hidden">
            <img style="width: 100%;height: 100%;" :src="item.faceUrl" alt="">
          </div>
        </td>
        <td>{{hbmd(item.status)}}</td>
        <td>{{item.groupName}}</td>
        <td>
           <span style="font-size: .16rem;margin-right: .2rem;cursor: pointer"
                 class="el-icon-edit-outline" @click="addpsm(1,item)"></span>
          <span style="font-size: .16rem;cursor: pointer" class="el-icon-delete"
                @click="delpeo(item)"></span>
        </td>
      </tr>
      </tbody>
    </table>

    <div class="pagingbox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="9"
        :pager-count="13"
        :current-page="currentPage"
        layout="total, prev, pager, next, jumper"
        :total="totalElements">
      </el-pagination>
    </div>

    <!--编辑框-->
    <div class="masklayer" v-show="ispm">
      <div class="editbox">
        <div class="editboxTitle">
          <span>{{cartext}}</span>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入人员姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="ruleForm.sex" placeholder="请选择人员性别" style="width: 100%">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件类别">
            <el-select v-model="ruleForm.id" placeholder="请选择证件类别" style="width: 100%">
              <el-option label="身份证" value="身份证"></el-option>
              <el-option label="护照" value="护照"></el-option>
              <el-option label="户口簿" value="户口簿"></el-option>
              <el-option label="驾驶证" value="驾驶证"></el-option>
              <el-option label="工作证" value="工作证"></el-option>
              <el-option label="学生证" value="学生证"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码">
            <el-input v-model="ruleForm.number" placeholder="请输入证件号码"></el-input>
          </el-form-item>
          <el-form-item label="黑白名单">
            <el-select v-model="ruleForm.statusStr" placeholder="请选择黑白名单" style="width: 100%">
              <el-option label="白名单" value="white"></el-option>
              <el-option label="黑名单" value="black"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分组">
            <el-autocomplete
              style="width: 100%"
              class="inline-input"
              v-model="ruleForm.groupName"
              :fetch-suggestions="querySearch"
              placeholder="请选择分组"
            ></el-autocomplete>
          </el-form-item>
        </el-form>

        <!--人员照片-->
        <div class="ppoto">
          <img :src="headphoto" alt="">
        </div>
        <!--人员照片-->

        <div class="upimage">
          <div>
            <img src="../../../static/images/upload.png" alt="">
            <span>上传照片</span>
          </div>
          <input type="file" accept="image/*" @change="openimage($event)">
        </div>

        <div class="bottombtn">
          <span class="cancelf" @click="resetForm('ruleForm')" style="margin-right: .2rem;">取消</span>
          <span class="greenf" @click="submitForm('ruleForm')">确定</span>
        </div>
      </div>
    </div>
    <!--编辑框-->

  </div>
</template>
<script>
  import http from '../../utils/http'
  import api from '../../utils/api'

  export default {
    data() {
      return {
        status: 1,
        cartext: "添加人员",
        input: "",
        ispm: false,
        ruleForm: {
          name: '',
          sex: '',
          id: "",
          number: "",
          groupName: "",
          statusStr: ""
        },
        rules: {
          name: [
            {required: true, message: '请输入人员姓名', trigger: 'blur'}
          ],
        },
        headphoto: "../../../static/images/headphoto.png",
        userList: [],
        pageNum: 0,
        totalElements: 10,
        currentPage: 1,
        statusStr: "",
        groupNameStr: "",
        areaId: "",
        uploadfile: "",
        compileId: "",
        nList: [],
        restaurants: []
      }
    },
    mounted() {
    },
    created() {
      this.areaId = sessionStorage.getItem('areaId');
      this.loginId = sessionStorage.getItem('loginId');
      this.getNameList();
      this.getpersonnel();
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      hbmd(t) {
        if (t == 'black') {
          return '黑名单'
        } else if (t == 'white') {
          return '白名单'
        } else {
          return '陌生名单'
        }
      },
      getNameList() {
        let vm = this;
        (async function f() {
          let res = await http.get(api.car.nameList, {
            areaId: vm.areaId,
            modelType: 'user',
            name: ""
          })
          if (res.data.code == '200') {
            vm.nList = res.data.data;
            let arr = [];
            res.data.data.forEach(e => {
              let z = {
                value: e
              }
              arr.push(z)
            })

            vm.restaurants = arr;
          }
        })()
      },
      delpeo(t) {
        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let _then = this;
          (async function () {
            let res = await http.delete(api.car.delUser + '?id=' + t.id)
            if (res.data.code == '200') {
              _then.$message({
                type: 'success',
                message: '删除成功!'
              });
              _then.getpersonnel();
            } else {
              _then.warn(res.data.message)
            }
          })()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      sec() {
        this.getpersonnel();
      },
      getpersonnel() {
        var then = this;
        (async function () {
          let res = await http.post(api.car.gateUser, {
            "pageSize": 9,
            "pageNum": then.pageNum,
            "areaId": then.areaId,
            "statusStr": then.statusStr,
            "groupNameStr": then.groupNameStr,
            "keywords": then.input
          })
          if (res.data.code == '200') {
            then.userList = res.data.data.content;
            then.totalElements = res.data.data.totalElements;
          } else {
            then.warn('网络异常，请联系后台管理员');
          }
        })()
      },
      addpsm(s, t) {
        this.ispm = true;
        if (s == 0) {
          this.cartext = '添加人员'
        }
        if (s == 1) {
          this.compileId = t.id;
          this.cartext = '修改人员';
          let obj = Object.assign({}, t);
          this.ruleForm.name = obj.name;
          this.ruleForm.sex = obj.sex;
          this.ruleForm.id = obj.certificateType;
          this.ruleForm.number = obj.certificateNum;
          this.ruleForm.statusStr = obj.statusStr;
          this.ruleForm.groupName = obj.groupName;
          this.headphoto = obj.faceUrl
        }
      },
      openimage(event) {
        let file = event.target.files;
        for (var i = 0; i < file.length; i++) {
          var img_url = window.URL.createObjectURL(file[i])
          this.headphoto = img_url;
        }
        this.uploadfile = file[0];
        /* var reader = new FileReader();
         reader.readAsDataURL(file[0]);
         reader.onload = function(e) {
         //          console.log(e.target.result)
         }*/

      },
      submitForm(formName) {
        if (this.cartext == '修改人员') {
          var fordata = new FormData();
          fordata.append("file", this.uploadfile);
          fordata.append("id", this.compileId);
          fordata.append("status", this.ruleForm.statusStr);
          fordata.append("name", this.ruleForm.name);
          fordata.append("sex", this.ruleForm.sex);
          fordata.append("certificateType", this.ruleForm.id);
          fordata.append("certificateNum", this.ruleForm.number);
          fordata.append("groupName", this.ruleForm.groupName);
          let then = this;
          (async function () {
            let res = await http.post(api.car.updateUser, fordata)
            if (res.data.code == "200") {
              then.success('修改成功');
              then.ispm = false;
              then.getpersonnel();
              then.$refs[formName].resetFields();
              for (let k in  then.ruleForm) {
                then.ruleForm[k] = ''
              }
              then.headphoto = "../../../static/images/headphoto.png"
            } else {
              then.warn(res.data.message);
            }
          })()
        }
        if (this.cartext == '添加人员') {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              var fordata = new FormData();
              fordata.append("file", this.uploadfile);
              fordata.append("loginId", this.loginId);
              fordata.append("status", this.ruleForm.statusStr);
              fordata.append("name", this.ruleForm.name);
              fordata.append("sex", this.ruleForm.sex);
              fordata.append("certificateType", this.ruleForm.id);
              fordata.append("certificateNum", this.ruleForm.number);
              fordata.append("groupName", this.ruleForm.groupName);
              let then = this;
              (async function () {
                let res = await http.post(api.car.addUser, fordata)
                if (res.data.code == "200") {
                  then.success('添加成功');
                  then.ispm = false;
                  then.getpersonnel();
                  then.$refs[formName].resetFields();
                  for (let k in  then.ruleForm) {
                    then.ruleForm[k] = ''
                  }
                  then.headphoto = "../../../static/images/headphoto.png"
                } else {
                  then.warn(res.data.message);
                }
              })()
            } else {
              return false;
            }
          });
        }

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        for (let k in  this.ruleForm) {
          this.ruleForm[k] = ''
        }
        this.headphoto = "../../../static/images/headphoto.png"
        this.ispm = false
      },
      openlist(t) {
        if (t == 0) {
          this.status = 1;
          this.statusStr = 'white'
        }
        if (t == 1) {
          this.status = 2;
          this.statusStr = 'black'
        }
        this.currentPage = 1;
        this.pageNum = 0;
        this.getpersonnel();
      },
      handleSizeChange(val) {
      },
      handleCurrentChange(val) {
        this.pageNum = val - 1;
        this.getpersonnel();
      },
      success(text) {
        this.$message({
          showClose: true,
          message: text,
          type: 'success',
        });
      },
      warn(text) {
        this.$message({
          showClose: true,
          message: text,
          type: 'warning'
        });
      },
    }
  }
</script>
<style scoped>
  @import "../../../static/css/personnel_manage.css";
</style>
